<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="opForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="操作" prop="opType">
        <el-radio-group v-model="formData.opType" @change="radioChange">
          <el-radio v-if="show1" :label="1">发起审计</el-radio>
          <el-radio v-if="show5" :label="5">再次审计</el-radio>
          <el-radio v-if="show2" :label="2">发起监控</el-radio>
          <el-radio v-if="show3" :label="3">下线</el-radio>
          <el-radio v-if="show4" :label="4">上线</el-radio>
          <el-radio :label="6" v-if="editData.ids.length == 1 && editData.editTagFlag == 1">资产打标</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="monitor" v-if="formData.opType === 1 || formData.opType === 5">
        <el-radio-group v-model="formData.monitor" @change="monitorRadioChange">
          <el-tooltip effect="dark" content='围绕"数据安全"、"权限安全"、"竞对安全"的安全要求进行审计' placement="top">
            <el-radio :label="1">全项审计</el-radio>
          </el-tooltip>
          <el-tooltip effect="dark" content="围绕专项维度的安全要求进行审计" placement="top">
            <el-radio :label="2">专项审计</el-radio>
          </el-tooltip>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="scene">
        <el-radio-group v-if="formData.monitor === 2" v-model="formData.scene">
          <el-radio label="subsystemperm">子系统权限</el-radio>
          <el-radio label="data">数据</el-radio>
          <el-radio label="perm">权限</el-radio>
          <el-radio label="competitor">竞对</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark" v-show="!showTag">
        <el-input type="textarea" :maxlength="200" v-model="formData.remark"></el-input>
      </el-form-item>
      <el-form-item label="标签名称" prop="labelName" v-show="showTag">
        <el-select v-model="formData.labelName" placeholder="请选择" multiple filterable>
          <el-option
            v-for="item in labelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="打标备注" prop="labelRemark" v-show="showTag">
        <el-input type="textarea" :maxlength="200" v-model="formData.labelRemark"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {assetsSubsystemBatchMonitor, tagsAddApi} from "api/propertyManage.js";
import { tagAllTagsApi } from "api/configApi";
export default {
  props: {
    editData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    //发起审计
    show1: function () {
      return this.editData.status == "create" ? true : false;
    },
    //发起监控
    show2: function () {
      return this.editData.status == "create" ? true : false;
    },
    //下线
    show3: function () {
      return this.editData.status != "offline" ? true : false;
    },
    //上线
    show4: function () {
      return this.editData.status == "offline" ? true : false;
    },
    //再次审计
    show5: function () {
      return this.editData.status == "done" ? true : false;
    },
  },
  data() {
    return {
      showTag: false,
      labelOptions: [],
      formData: {
        opType: "",
        remark: "",
        labelName: [],
        labelRemark: "",
        scene: "",
        monitor: ""
      },
      formRules: {
        opType: [{ required: true, message: "请选择一个操作", trigger: "blur" }],
        labelName: [{ required: true, message: "请输入", trigger: "blur" }]
      },
    };
  },
  mounted() {
    console.log("this.editData", this.editData);
    console.log("this.editData.ids", this.editData.ids);
    //获取所有的标签名称
    tagAllTagsApi({
      assetId: this.editData.ids[0],
    }).then((res) => {
      let data = res.data || [];
      console.log("data", data);
      this.labelOptions = [];
      data.forEach((item) => {
        let obj = { label: item.tagName, value: item.tagCode, disabled: item.selected == 1 || item.edited == "0" };
        this.labelOptions.push(obj);
      });
    });
  },
  methods: {
    radioChange(val) {
      this.$refs.opForm.clearValidate();
      this.showTag = val == 6 ? true : false;
      this.formData.monitor = ''
      this.formData.scene = ''
    },
    // 审计专项改变
    monitorRadioChange(val) {
      this.formData.scene = ''
    },
    /**
     * 表单提交
     * 此方法由父组件dialog中的footer 按钮调用
     */
    async submit() {
      try {
        // await this.$refs.opForm.validate();

        if (this.formData.opType == 6) {
          if (this.formData.labelName.length <= 0) {
            this.message.warning({ message: "请输入标签名称" });
            return;
          }
          let { labelRemark, labelName } = this.formData;
          let obj = { assetId: this.editData.ids[0], tagCodeList: labelName, remark: labelRemark };
          let res = await tagsAddApi([obj]);
          console.log(res);
          return { ...res, sign: "tag" };
        } else {
          if (!this.formData.opType) {
            this.message.warning({ message: "请选择一个操作" });
            return;
          }
          if ((this.formData.opType === 1 || this.formData.opType === 5) && !this.formData.monitor) {
            this.message.warning({ message: "请选择一个操作" });
            return;
          }
          if ((this.formData.opType === 1 || this.formData.opType === 5) && this.formData.monitor === 2 && !this.formData.scene) {
            this.message.warning({ message: "请选择一个操作" });
            return;
          }
          let params = { ids: this.editData.ids, remark: this.formData.remark };
          let res;
          if (this.formData.opType == 1 || this.formData.opType == 5) {
            let param = { ids: this.editData.ids, remark: this.formData.remark, scene: this.formData.scene };
            res = await this.$store.dispatch("propertyManage/subsystemBatchReport", param);
          }
          if (this.formData.opType == 2) {
            let monitorParam = { ids: this.editData.ids, remark: this.formData.remark, scene: 'subsystemperm' };
            res = await this.$store.dispatch("propertyManage/subsystemBatchMonitor", monitorParam);
          }
          if (this.formData.opType == 3) {
            res = await this.$store.dispatch("propertyManage/subsystemBatchOffline", params);
          }
          if (this.formData.opType == 4) {
            res = await this.$store.dispatch("propertyManage/subsystemBatchOnline", params);
          }
          return res;
        }
      } catch (error) {
        return { code: 1, msg: "error", data: "error" };
      }
    },
  },
};
</script>
